<template>
    <div class="header">
        <div class="container">
            <div class="logo"><img src="~assets/index/logo.png" alt=""></div>
            <ul class="table">
                <router-link to="/">
                    <li>
                        首页
                        <span></span>
                    </li>
                </router-link>
                 
                    <li @click="toshop('http://www.siemensgabor.com')">
                        嘉宝商城
                        <span></span>
                    </li>
               
                 <router-link to="/">
                    <li>
                        新闻动态
                        <span></span>
                    </li>
                </router-link>
                 <router-link to="/">
                    <li>
                        加盟嘉宝
                        <span></span>
                    </li>
                </router-link>
                 <router-link to="/">
                    <li>
                        关于嘉宝
                        <span></span>
                    </li>
                </router-link>

               
            </ul>
        </div>
    </div>
</template>

<style lang="stylus" scoped>
@import '~assets/varibles.styl' 
.header
    z-index 9999
    width 100%
    position absolute
    top 0
    left 0
    height $headerHeight 
    background-color rgba(0,0,0,0.4)
    .container
        width $container
        margin $center
        height $headerHeight 
        .logo 
            float left
            margin-top 20px
        .table
            float right
            overflow hidden
            li
                float left
                margin-left 47px
                color white
                font-size 16px
                line-height 90px
                position relative
                cursor pointer
li span 
    position absolute
    height 3px
    left 50%
    bottom 0
    width 0%
    background #00a6b9
    transition all 0.1s
li:hover>span 
    left 0
    width 100%        
</style>

<script>
export default {
      name:'IndexHeader',
        
        data (){
            return {
                
            
            }
        },
        methods: {
            toshop (e){
               window.location.href = e    
            }
        },
}
</script>